<template>

  <el-select
    :loading="store.loading"
    :remote-method="remoteMethod"
    filterable
    placeholder="请输入关键词查询"
    remote
    v-bind="$attrs"
    v-model="proxyData">
    <el-option
      :key="item.MaterialItemID"
      :label="item.Name"
      :value="item.MaterialItemID"
      v-for="item in store.options">
    </el-option>
  </el-select>

</template>

<script>
  import { computed, reactive, onBeforeMount, watchEffect } from '@vue/composition-api'
  import { MaterialItemGetAllPage } from '@/api/productInformation'

  export default {
    name: 'MaterialSelectQuery',
    props: {
      mid: {
        type: [Number, String],
        require: true
      }
    },
    setup(props, ctx) {

      const store = reactive({
        options: [],
        // inkey: '',
        page: 1,
        pagesize: 100,
        loading: false
      })

      const getItemBy = (mid) => {
        return store.options.find(v => v.MaterialItemID === mid)
      }

      // SizeDetail: {SizeDetailId: 4685, SizeId: 3, Width: 75, Height: 58.5, Length: 0, Dto_SizeMain: null,…}

      const proxyData = computed({
        get() {
          return props.mid
        },
        set(v) {
          ctx.emit('update:mid', v)
          const { Width, Height } = getItemBy(v)['SizeDetail']
          ctx.emit('material-change', { w: Width * 10, h: Height * 10 })
        }
      })

      const getMaterialList = async({ query = '' } = {}) => {
        console.log('~~~~~~~~~~~~~~~~~~~~')

        const { page, pagesize } = store
        const { Result: { Items } } = await MaterialItemGetAllPage({
          inkey: query,
          page,
          pagesize
        })
        store.options = Items
      }

      getMaterialList()

      const remoteMethod = async(query) => {
          store.loading = true
          await getMaterialList({ query })
          store.loading = false
      }

      return { store, remoteMethod, proxyData }
    }
  }
</script>

<style lang="scss" scoped>

</style>
